<template>
  <div class="four flex_column">
    <everyHorn />
    <div v-if="btnFour" class="tital_home">
      <img src="@/assets/img/home-page/four_title.png" alt="">
      <!-- <h2>公告栏</h2> -->
      <div class="select">
        <el-select v-model="city" style="width:120px" placeholder="请选择" @change="changeCity">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div v-if="btnFour" class="flex_1 map">
      <div v-if="city == 'CQ'" id="mapChart" class="chart" />
      <div v-if="city == 'GY'" id="mapChart" class="chart" />
      <div class="area">
        <p>{{ areaNow.name }}</p>
        <p>客户数量</p>
        <!-- <animate-number from="0" :to="areaNow.customerNum" class="num" duration="3000" /> -->
        <p class="num">{{ areaNow.customerNum }}</p>
        <p>落单数量 </p>
        <!-- <animate-number from="0" :to="areaNow.orderNum" class="num" duration="3000" /> -->
        <p class="num">{{ areaNow.orderNum }}</p>
      </div>
    </div>
    <div v-else class="main flex_1 flex_column flex_center">
      暂无权限
    </div>
  </div>
</template>

<script>

import everyHorn from './every_horn.vue'
import data from '@/assets/js/data-1576202632287-KBwWpPjR.json'
import guiyang from '@/assets/js/guiyang.json'
import { authoritymanagement } from '@/assets/js/utils.js'
const echarts = require('echarts')
var myChart // 全局定义变量
export default {
  name: '',
  components: {
    everyHorn
  },
  data() {
    return {
      btnFour: '', // 查看权限
      options: [
        { label: '重庆', value: 'CQ' },
        { label: '贵阳', value: 'GY' }
      ],
      city: 'CQ',
      timereee: null,
      areaNow: { // 当前展示的区域内容
        name: '',
        seriesName: '',
        seriesId: '',
        customerNum: 0,
        orderNum: 0
      },
      customerSite: [],
      customerLine: [],
      regionList: []
      // mapDate: [
      //   {
      //     name: ' ',
      //     value: [106.666744, 26.363022],
      //     datas: ' ',
      //     img: 'image://http://gallerybox.makeapie.com/asset/get/s/data-1619059838735-QE9mBZmhh.png'
      //   },
      //   {
      //     name: ' ',
      //     value: [106.679022, 26.732292],
      //     datas: ' ',
      //     img: 'image://http://gallerybox.makeapie.com/asset/get/s/data-1619059838735-QE9mBZmhh.png'
      //   }, {
      //     name: ' ',
      //     value: [106.619023, 26.712290],
      //     datas: ' ',
      //     img: 'image://http://gallerybox.makeapie.com/asset/get/s/data-1619059838735-QE9mBZmhh.png'
      //   }]
    }
  },
  mounted() {
    // this.city == 'CQ' ? this.initCQ() : this.initGY()
    let RoleCode = this.$getLocalItem('jx_RoleCode')
    this.btnFour = authoritymanagement(RoleCode, 'lypc_btn_btnFour')
    if (this.btnFour) {
      this.init(this.city)
    }
  },
  beforeDestroy() {
    clearInterval(this.timereee)
  },

  methods: {
    // 初始化数据
    init(v) {
      this.customerLine = []
      this.customerSite = []
      // this.customerNum = 0
      // this.orderNum = 0
      let arr = []
      // [
      //   { customerNum: 2, orderNum: 3, region: '白云区' },
      //   { customerNum: 6, orderNum: 4, region: '乌当区' },
      //   { customerNum: 6, orderNum: 1, region: '南明区' },
      //   { customerNum: 2, orderNum: 4, region: '乌当区' },
      //   { customerNum: 5, orderNum: 6, region: '乌当区' }
      // ]
      this.$http.get('/ly-oms-servicer/order/page/map/message?province=' + this.city, {}, res => {
        if (res && res.code == 0) {
          res.responseBody.map(item => {
            item.storageMaps.map(val => {
              arr.push({ customerNum: val.customerNum, orderNum: val.orderNum, region: val.region })
              this.customerSite.push({ value: [item.storageLon, item.storageLat], itemStyle: { color: '#FF6A6A' }})
              val.customerMaps.map(ele => {
                this.customerLine.push({ coords: [[item.storageLon, item.storageLat], [ele.customerLon, ele.customerLat]], lineStyle: { color: '#FF6A6A' }, itemStyle: { color: '#4ab2e5' }})
                this.customerSite.push({ value: [ele.customerLon, ele.customerLat], itemStyle: { color: '#4ab2e5' }})
              })
            })
          })
          // 合计各个区的客户数量和落单数
          let nameArr = [...new Set(arr.map(i => i.region))]
          let list = []
          nameArr.forEach(v => {
            let filterList = arr.filter(a => v == a.region)
            list.push(filterList)
          })
          let outArr = []
          list.forEach((item, index) => {
            let orderNumAdd = item.reduce((total, g) => {
              return total + Number(g.orderNum)
            }, 0)
            let customerNumAdd = item.reduce((total, g) => {
              return total + Number(g.customerNum)
            }, 0)
            outArr.push({
              region: nameArr[index],
              orderNum: orderNumAdd,
              customerNum: customerNumAdd
            })
          })
          this.regionList = outArr
          v == 'CQ' ? this.initCQ() : this.initGY()
        }
      })
    },
    initCQ() {
      var self = this
      var domImg = document.createElement('img')
      domImg.style.height = domImg.height = domImg.width = domImg.style.width = '8px'
      domImg.src = ''
      var domImgHover = document.createElement('img')
      domImgHover.style.height = domImgHover.height = domImgHover.width = domImgHover.style.width = '8px'
      domImgHover.src = ''
      // var img2 = 'image://http://gallerybox.makeapie.com/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
      let points = this.customerSite
      //  [
      //   { value: [108.380246, 30.807807], itemStyle: { color: '#4ab2e5' }},
      //   { value: [107.394905, 29.703652] },
      //   { value: [106.4542, 29.541224] },
      //   { value: [106.56288, 29.556742], itemStyle: { color: '#5abead' }},
      //   { value: [106.48613, 29.481002], itemStyle: { color: '#f34e2b' }},
      //   { value: [106.532844, 29.575352], itemStyle: { color: '#f34e2b' }},
      //   { value: [106.480989, 29.523492], itemStyle: { color: '#4ab2e5' }},
      //   { value: [108.996043, 28.444772] },
      //   { value: [108.166551, 29.293856] },
      //   { value: [108.166551, 29.293856] },
      //   { value: [107.098153, 29.156646] },
      //   { value: [108.413317, 31.167735] },
      //   { value: [108.6649, 31.946293] },
      //   { value: [108.697698, 30.930529] },
      //   { value: [106.265554, 29.990993] }
      // ]
      echarts.registerMap('bd', data)
      let option = {
        // backgroundColor: '#013954',
        geo: {
          map: 'bd',
          aspectScale: 0.75, /* 长宽比*/
          zoom: 1.2,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' /* 0% 处的颜色*/
                }, {
                  offset: 1,
                  color: '#274d68' /* 100% 处的颜色*/
                }],
                globalCoord: true /* 缺省为 false*/
              },
              shadowColor: 'rgb(58,115,192)',
              shadowOffsetX: 10,
              shadowOffsetY: 11
            },
            emphasis: {
              areaColor: '#2AB8FF',
              borderWidth: 0,
              color: 'green',
              label: {
                show: false
              }
            }
          }
        },
        series: [{
          type: 'map',
          roam: false,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: 'rgba(29, 233, 182, .5)'
              }
            },
            emphasis: {
              textStyle: {
                color: '#EEEE00'
              }
            }
          },

          itemStyle: {
            normal: {
              borderColor: 'rgb(147, 235, 248)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' /* 0% 处的颜色*/
                }, {
                  offset: 1,
                  color: '#274d68' /* 100% 处的颜色*/
                }],
                globalCoord: true /* 缺省为 false*/
              }
            },
            emphasis: {
              areaColor: 'rgba(46,229,206,0.5)',
              /*    shadowColor: 'rgb(12,25,50)',*/
              borderWidth: 0.1
            }
          },
          zoom: 1.2,
          /*     roam: false,*/
          map: 'bd' /* 使用
            /* data: this.difficultData /*热力图数据   不同区域 不同的底色*/
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          zlevel: 1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: 'fill'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              offset: [15, 0],
              color: '#1DE9B6',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#1DE9B6', /* function (value){ 随机颜色 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
 }*/
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          symbolSize: 4,
          data: points
        }, /* 地图线的动画效果*/
        {
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 3, /* 箭头指向速度，值越小速度越快*/
            trailLength: 0.2, /* 特效尾迹长度[0,1]值越大，尾迹越长重*/
            symbol: 'arrow', /* 箭头图标*/
            symbolSize: 2 /* 图标大小*/
          },
          lineStyle: {
            normal: {
              color: '#1DE9B6',
              width: 1, /* 线条宽度*/
              opacity: 0.1, /* 尾迹线条透明度*/
              curveness: 0.3 /* 尾迹线条曲直度*/
            }
          },
          data: this.customerLine
          // [
          //   { coords: [[108.380246, 30.807807], [107.394905, 29.703652]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [106.4542, 29.541224]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [106.56288, 29.556742]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [106.48613, 29.481002]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [106.532844, 29.575352]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [106.480989, 29.523492]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [108.996043, 28.444772]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [108.166551, 29.293856]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [108.166551, 29.293856]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [107.098153, 29.156646]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [108.413317, 31.167735]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [108.6649, 31.946293]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [108.697698, 30.930529]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[108.380246, 30.807807], [106.265554, 29.990993]], lineStyle: { color: '#f34e2b' }}
          // ]
        }]
      }
      this.drawEcharts('mapChart', option)
      let index = -1
      this.timereee = setInterval(function() {
        console.log('four setInterval2 timer execute')
        // 隐藏提示框
        myChart.dispatchAction({
          type: 'hideTip',
          seriesIndex: 0,
          dataIndex: index
        })
        // 显示提示框
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index + 1
        })
        // 取消高亮指定的数据图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        })
        // 高亮指定的数据图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index + 1
        })
        if (data.features[index + 1]) {
          self.areaNow.name = data.features[index + 1].properties.name
          let ind = 0
          let isExis = self.regionList.some((item, index) => {
            if (item.region == self.areaNow.name) {
              ind = index
              return true
            }
          })
          if (isExis) {
            self.areaNow.customerNum = self.regionList[ind].customerNum
            self.areaNow.orderNum = self.regionList[ind].orderNum
          } else {
            self.areaNow.customerNum = 0
            self.areaNow.orderNum = 0
          }
        //    seriesName: '',
        // seriesId: '',
        // customerNum: 0,
        // orderNum: 0
        } else {
          self.areaNow.name = ''
          self.areaNow.customerNum = 0
          self.areaNow.orderNum = 0
        }
        index++
        if (index > 40) {
          index = -1
        }
      }, 2000)
    },
    initGY() {
      var self = this
      var domImg = document.createElement('img')
      domImg.style.height = domImg.height = domImg.width = domImg.style.width = '8px'
      domImg.src = ''

      var domImgHover = document.createElement('img')
      domImgHover.style.height = domImgHover.height = domImgHover.width = domImgHover.style.width = '8px'
      domImgHover.src = ''

      // var img2 = 'image://http://gallerybox.makeapie.com/asset/get/s/data-1619318279159-o6ZbTGoO0.png'
      // var img2 = require('@/assets/img/homepage.webp')
      let points = this.customerSite
      // [
      //   { value: [106.70234, 26.435] },
      //   { value: [106.679022, 26.732292], itemStyle: { color: '#4ab2e5' }},
      //   { value: [106.666744, 26.363022] },
      //   { value: [106.704778, 26.6] },
      //   { value: [106.77443, 26.526697], itemStyle: { color: '#5abead' }},
      //   { value: [106.882324, 26.75748], itemStyle: { color: '#f34e2b' }},
      //   { value: [106.558772, 26.6532], itemStyle: { color: '#f34e2b' }},
      //   { value: [106.768772, 26.7232], itemStyle: { color: '#4ab2e5' }},
      //   { value: [106.658772, 26.5532] }
      // ]
      echarts.registerMap('bd', guiyang)
      let option = {
        // backgroundColor: '#013954',
        geo: {
          map: 'bd',
          aspectScale: 0.75, /* 长宽比*/
          zoom: 1.2,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' /* 0% 处的颜色*/
                }, {
                  offset: 1,
                  color: '#274d68' /* 100% 处的颜色*/
                }],
                globalCoord: true /* 缺省为 false*/
              },
              shadowColor: 'rgb(58,115,192)',
              shadowOffsetX: 10,
              shadowOffsetY: 11
            },
            emphasis: {
              areaColor: '#2AB8FF',
              borderWidth: 0,
              color: 'green',
              label: {
                show: false
              }
            }
          }
        },
        series: [{
          type: 'map',
          roam: false,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: 'rgba(29, 233, 182, .5)'
              }
            },
            emphasis: {
              textStyle: {
                color: '#EEEE00'
              }
            }
          },

          itemStyle: {
            normal: {
              borderColor: 'rgb(147, 235, 248)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' /* 0% 处的颜色*/
                }, {
                  offset: 1,
                  color: '#274d68' /* 100% 处的颜色*/
                }],
                globalCoord: true /* 缺省为 false*/
              }
            },
            emphasis: {
              areaColor: 'rgba(46,229,206,0.5)',
              /*    shadowColor: 'rgb(12,25,50)',*/
              borderWidth: 0.1
            }
          },
          zoom: 1.2,
          /*     roam: false,*/
          map: 'bd' /* 使用
            /* data: this.difficultData /*热力图数据   不同区域 不同的底色*/
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          zlevel: 1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: 'fill'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              offset: [15, 0],
              color: '#1DE9B6',
              show: true
            }
          },
          itemStyle: {
            normal: {
              color: '#1DE9B6', /* function (value){ 随机颜色 return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
 }*/
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          symbolSize: 4,
          data: points
        }, /* 地图线的动画效果*/
        {
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 3, /* 箭头指向速度，值越小速度越快*/
            trailLength: 0.2, /* 特效尾迹长度[0,1]值越大，尾迹越长重*/
            symbol: 'arrow', /* 箭头图标*/
            symbolSize: 2 /* 图标大小*/
          },
          lineStyle: {
            normal: {
              color: '#1DE9B6',
              width: 1, /* 线条宽度*/
              opacity: 0.1, /* 尾迹线条透明度*/
              curveness: 0.3 /* 尾迹线条曲直度*/
            }
          },
          data: this.customerLine
          // [
          //   { coords: [[106.70234, 26.435], [106.679022, 26.732292]] },
          //   { coords: [[106.70234, 26.435], [106.666744, 26.363022]] },
          //   { coords: [[106.70234, 26.435], [106.704778, 26.6]] },
          //   { coords: [[106.70234, 26.435], [106.77443, 26.526697]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[106.70234, 26.435], [106.882324, 26.75748]], lineStyle: { color: '#f34e2b' }},
          //   { coords: [[106.70234, 26.435], [106.558772, 26.6532]] },
          //   { coords: [[106.70234, 26.435], [106.768772, 26.7232]] },
          //   { coords: [[106.70234, 26.435], [106.658772, 26.5532]] }

          // ]
        }]
      }
      this.drawEcharts('mapChart', option)
      let index = -1
      this.timereee = setInterval(function() {
        console.log('four setInterval1 timer execute')
        // 隐藏提示框
        myChart.dispatchAction({
          type: 'hideTip',
          seriesIndex: 0,
          dataIndex: index
        })
        // 显示提示框
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index + 1
        })
        // 取消高亮指定的数据图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        })
        // 高亮指定的数据图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index + 1
        })
        if (guiyang.features[index + 1]) {
          self.areaNow.name = guiyang.features[index + 1].properties.name
          let ind = 0
          let isExis = self.regionList.some((item, index) => {
            if (item.region == self.areaNow.name) {
              ind = index
              return true
            }
          })
          if (isExis) {
            self.areaNow.customerNum = self.regionList[ind].customerNum
            self.areaNow.orderNum = self.regionList[ind].orderNum
          } else {
            self.areaNow.customerNum = 0
            self.areaNow.orderNum = 0
          }
        } else {
          self.areaNow.name = ''
          self.areaNow.customerNum = 0
          self.areaNow.orderNum = 0
        }
        index++
        if (index > 5) {
          index = -1
        }
      }, 2000)
    },
    // Echarts绘图
    drawEcharts(id, option) {
      if (myChart != null && myChart != '' && myChart != undefined) {
        myChart.dispose()// 销毁
      }
      myChart = echarts.init(document.getElementById(id)) // echartsExample是显示echart的元素id
      myChart.setOption(option)
      // this.loading = false
      return myChart
    },
    changeCity(v) {
      clearInterval(this.timereee)
      this.$data.areaNow = this.$options.data.call(this).areaNow
      // v == 'CQ' ? this.initCQ() : this.initGY()
      this.init(v)
    }
  }
}
</script>

<style lang="scss" scoped>
.four {
  position: relative;
  width: 649px;
  height: 637px;
  background-image: url('~@/assets/img/home-page/four.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .select {
    margin-left: 10px;
  }
  .chart {
    width: 100%;
    height: 100%;
  }
  .map {
    position: relative;
    .area {
      position: absolute;
      right: 50px;
      bottom: 0;
     p {
        font-weight: bold;
        font-size: 14px;
        line-height: 60px;
        text-align: right;
        padding-left: 10px;
        &:nth-of-type(1) {
          font-size: 18px;
        }
      }
      .num {
        font-size: 30px;
        padding-left: 10px;
      }
    }
  }
}
</style>
